<template>
  <div class="container" v-loading="saveLoading">
    <el-row>
      <el-col :span="12" class="borderRight">
        <div class="listWrapper">
          <div class="listTitle">
            列表
          </div>
          <div class="btnWrapper">
            <el-button type="primary" size="small" @click="addLevel1MenuHandle">添加一级菜单</el-button>
          </div>
          <div class="listTable">
            <el-tree
                highlight-current
                :expand-on-click-node="false"
                :default-expanded-keys="formId"
                @node-click="handleNodeClick"
                node-key="id"
                ref="tree"
                :data="allService"
                :props="defaultProps"
                :check-on-click-node="true">
            </el-tree>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="listWrapper">
          <div class="listTitle">
            详情
          </div>
          <div class="detailWrapper">
            <el-form ref="form" :model="form" size="small" label-width="100px" v-if="detailShow">
              <el-row>
                <el-col :span="18">
                  <el-form-item label="名称" prop="name">
                    <el-input v-model.trim="form.name" maxlength="40" show-word-limit placeholder="请输入名称">
                    </el-input>
                  </el-form-item>
                  <el-form-item label="路径" prop="action">
                    <el-input v-model.trim="form.action" placeholder="请输入路径">
                    </el-input>
                  </el-form-item>
                  <el-form-item label="样式" prop="icon">
                    <el-input v-model.trim="form.icon" placeholder="请输入名称">
                    </el-input>
                  </el-form-item>
                  <el-form-item label="属性" prop="level">
                    <el-checkbox v-model="form.level">权限</el-checkbox>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" size="small" @click="modifyMenuHandle">修改</el-button>
                    <el-button type="danger" size="small" @click="deleteMenuHandle">删除</el-button>
                    <el-button type="primary" size="small" @click="moveUpMenuHandle">上移</el-button>
                    <el-button type="primary" size="small" @click="moveDownMenuHandle">下移</el-button>
                    <el-button type="primary" size="small" @click="addNextMenuHandle">添加下级</el-button>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>
      </el-col>
    </el-row>
    <add-menu-dialog
        :title="dialogTitle"
        :parent-id="currentId"
        :parent-name="currentName"
        @success="addMenuGetAllService"
        :show.sync="addMEnuDialogShow"/>
  </div>
</template>

<script>
import addMenuDialog from '@/views/settingManage/menuManage/add-menu-dialog'

export default {
  name: "MenuList",
  data() {
    return {
      saveLoading: false,
      form: {
        name: '',
        icon: '',
        action: '',
        level: '',
        id: '',
        parentId: ''
      },
      allService: [],
      defaultProps: {
        children: 'menuList',
        label: 'name'
      },
      detailShow: false,
      addMEnuDialogShow: false,
      dialogTitle: '',
      currentId: '',
      currentName: '',
      formId: [],
      // currentNodeId: ''

      baseRoleVisualBatchDialog: false,//批量新增删除权限
    }
  },
  components: {addMenuDialog},
  mounted() {
    this.getAllService()
  },
  methods: {
    // 新增菜单后触发的函数
    async addMenuGetAllService() {
      await this.getAllService();
      await this.$refs.tree.setCurrentKey(this.form.id);
    },
    // 添加下级菜单
    addNextMenuHandle() {
      this.addMEnuDialogShow = true;
      this.dialogTitle = '新增下级';
      this.currentId = this.form.id;
      this.currentName = this.form.name;
    },
    // 添加一级菜单
    addLevel1MenuHandle() {
      this.addMEnuDialogShow = true;
      this.dialogTitle = '新增一级菜单';
      this.currentId = '';
      this.currentName = '';
    },
    // 上移菜单
    async moveUpMenuHandle() {
      await this.$get(this.$api.systemSettings.menuManage.moveUp, {
        id: this.form.id
      });
      this.$alert('上移成功！').then(async () => {
        await this.getAllService();
        await this.$refs.tree.setCurrentKey(this.form.id);
      })
    },
    // 下移菜单
    async moveDownMenuHandle() {
      await this.$get(this.$api.systemSettings.menuManage.moveDown, {
        id: this.form.id
      });
      this.$alert('下移成功！').then(async () => {
        await this.getAllService()
        await this.$refs.tree.setCurrentKey(this.form.id);
      })
    },
    // 删除菜单
    async deleteMenuHandle() {
      await this.$get(this.$api.systemSettings.menuManage.deleteMenu, {
        id: this.form.id
      });
      this.$alert('删除成功！').then(async () => {
        await this.getAllService();
        await this.$refs.tree.setCurrentKey(this.form.parentId);
        await this.handleNodeById(this.form.parentId);
      })
    },
    // 修改菜单
    async modifyMenuHandle() {
      let param = {...this.form}
      if (this.form.level) {
        param.level = "BUTTON"
      } else {
        delete param.level
      }
      await this.$post(this.$api.systemSettings.menuManage.updateMenu, {
        ...param
      });
      this.$alert('修改成功！').then(async () => {
        await this.getAllService()
        await this.$refs.tree.setCurrentKey(this.form.id);
      })
    },
    // 点击节点获取每个菜单的信息
    async handleNodeClick(data) {
      let result = await this.$get(this.$api.systemSettings.menuManage.getInfoById, {
        id: data.id
      });
      this.$utils.leftCopy(this.form, {...result})
      if (result.level == "BUTTON") {
        this.form.level = true
      }
      this.detailShow = true;
    },
    // 通过 id 获取每个菜单的信息
    async handleNodeById(id) {
      let result = await this.$get(this.$api.systemSettings.menuManage.getInfoById, {
        id: id
      });
      this.$utils.leftCopy(this.form, {...result})
      this.detailShow = true;
    },
    // 获取菜单树
    async getAllService() {
      this.saveLoading = true;
      this.$refs.tree.getCheckedNodes()
      this.allService = await this.$get(this.$api.systemSettings.menuManage.baseList);

      // 当前节点或者其父节点展开
      this.formId = [];
      if (this.form.parentId) {
        this.formId.push(this.form.parentId)
      } else {
        this.formId.push(this.form.id)
      }
      this.saveLoading = false;
      // this.detailShow = false
    },
    batchImport() {
      this.baseRoleVisualBatchDialog = true
    }
  },
}
</script>

<style scoped>
.listTitle {
  line-height: 40px;
  background: #F2F5F9;
  padding-left: 40px;
}

.listTable {
  padding-left: 40px;
  height: calc(100vh - 190px);
  overflow: auto;
}

.btnWrapper {
  padding: 10px 40px;
}

.borderRight {
  border-right: 1px solid #e2e2e2
}

.el-tree {
  background-color: #F8FBFF;
}
</style>
